<template>
	<div class="toolBar">
		<div class="searchBox">
			<el-input class="searchInput" prefix-icon="el-icon-search" v-model="searchVal" placeholder="搜索IP...">
			</el-input>
			<!-- <el-select class="selectNodeType" v-model="selectNodeType">
        <el-option
          v-for="item in selectNodeTypeOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
          <i :class="item.class">&nbsp;{{ item.label }}</i>
        </el-option>
      </el-select> -->
			<el-select class="selectLevel" v-model="selectLevel" clearable placeholder="告警级别">
				<el-option v-for="item in level" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="info" plain @click="ToHistoryWarnning">检索历史告警</el-button>
			<!-- <el-button type="info" plain @click="sureDialogOpen" >确定告警</el-button> -->
		</div>
		<div class="tableTool">
			<el-tooltip content="筛选列" placement="top" effect="dark">
				<el-popover placement="left-start" width="100" trigger="click">
					<el-checkbox-group id="myCheckboxGroup" v-model="checkedArr" @change="handleChange">
						<el-checkbox v-for="item in tableColumns" :class="checkboxStyleFn(item)" :label="item.label"
							:key="item.prop" style="display: block">
							{{ item.label }}
						</el-checkbox>
					</el-checkbox-group>
					<el-button class="btnLie" icon="el-icon-jk-lie" slot="reference">
					</el-button>
				</el-popover>
			</el-tooltip>
			<el-tooltip content="导出" placement="top" effect="dark">
				<download-excel class="downExcel" type="xls" :data="tableData" :fields="tableDataFields"
					name="告警面板.xls">
					<el-button class="btnExport" icon="el-icon-jk-export"> </el-button>
				</download-excel>
			</el-tooltip>
		</div>
	</div>
</template>

<script>
	import bus from "common/bus.js";
	import {
		getUserData
	} from "@/utils/IndexedDB.js";
	export default {
		props: ["tableColumns", "tableData", "tableDataFields"],
		data() {
			return {
				level: [{
						value: 3,
						label: "紧急"
					},
					{
						value: 2,
						label: "普通"
					},
					{
						value: 1,
						label: "提醒"
					},
				],
				searchVal: "",
				changeLie: "",
				checkedArr: [],
				selectLevel: this.$route.params.level ? this.$route.params.level : "",
				handLevel: "",
				selectNodeTypeOption: [{
						value: "alertlist",
						label: "全部",
						class: "el-icon-menu"
					},
					{
						value: "dbalertlist",
						label: "数据库",
						class: "el-icon-jk-shujuku",
						disabled: true,
					},
					{
						value: "osalertlist",
						label: "服务器",
						class: "el-icon-jk-fuwuqi",
						disabled: true,
					},
					{
						value: "netalertlist",
						label: "网络",
						class: "el-icon-jk-wangluoshebei",
						disabled: true,
					},
				],
				selectNodeType: this.$route.params.nodeType ?
					this.$route.params.nodeType :
					"alertlist",
			};
		},
		created() {
			// 接收告警点击
			bus.$on("handCommand", (msg) => {
				// console.log(msg)
				this.selectNodeType = msg.nodeType;
				this.selectLevel = msg.level;
				this.searchVal = msg.IP
			});
			this.initCheckedArr();
			this.initSelectNodeTypeOption();
		},
		computed: {},
		methods: {
			handleChange(val) {
				this.changeLie = val;
				this.$emit("changeLie", val);
			},
			initCheckedArr() {
				this.tableColumns.forEach((element, index) => {
					if (element.isShow) {
						this.checkedArr.push(element.label);
					}
				});
			},
			initSelectNodeTypeOption() {
				getUserData("userBase", "infoBase", 0).then((res) => {
					switch (res.ms_type) {
						//数据库
						case "superAdmin":
						case "bigadmin":
						case "bigUser":
							this.selectNodeTypeOption[1].disabled = false;
							this.selectNodeTypeOption[2].disabled = false;
							this.selectNodeTypeOption[3].disabled = false;
							break;
						case "Badmin":
						case "Buser":
							this.selectNodeTypeOption[1].disabled = false;
							break;
						case "BSadmin":
						case "BSuser":
							this.selectNodeTypeOption[1].disabled = false;
							this.selectNodeTypeOption[2].disabled = false;
							break;
						case "BNadmin":
						case "BNuser":
							this.selectNodeTypeOption[1].disabled = false;
							this.selectNodeTypeOption[3].disabled = false;
							break;

						case "Sadmin":
						case "Suser":
							this.selectNodeTypeOption[2].disabled = false;
							break;
						case "SNadmin":
						case "SNuser":
							this.selectNodeTypeOption[2].disabled = false;
							this.selectNodeTypeOption[3].disabled = false;
							break;

						case "Nadmin":
						case "Nuser":
							this.selectNodeTypeOption[3].disabled = false;
							break;
					}
				});
			},
			checkboxStyleFn(item) {
				if (item.isShow) {
					return "testClass1";
				} else {
					return "testClass2";
				}
			},
			ToHistoryWarnning() {
				this.$router.push('/historywarningPanel')
			},
			sureDialogOpen() {
				this.$emit("sureDialogOpen")
			}
		},
		watch: {
			searchVal: function(newVal, oldVal) {
				this.$emit("getSearchIP", this.searchVal);
			},
			selectLevel: function(newVal, oldVal) {
				this.$emit("selectLevel", this.selectLevel);
			},
			selectNodeType: function(newVal, oldVal) {
				this.$emit("selectNodeType", this.selectNodeType);
			},
		},
		// destroyed(){
		//   bus.$on("handCommand")
		// }
	};
</script>

<style scoped>
	.toolBar {
		overflow: hidden;
		margin-bottom: 14px;
	}

	.toolBar .searchBox {
		float: left;
	}

	.toolBar .searchBox .searchInput {
		display: inline-block;
		width: 240px;
		margin-right: 10px;
	}

	.toolBar .searchBox .selectLevel,
	.selectNodeType {
		display: inline-block;
		width: 150px;
		margin-right: 10px;
	}

	.toolBar .tableTool {
		float: right;
	}

	.toolBar .tableTool .btnLie {
		margin-right: 10px;
	}

	.toolBar .tableTool .downExcel {
		display: inline-block;
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #5fb878;
		border-color: #5fb878;
	}

	#myCheckboxGroup /deep/ .el-checkbox {
		margin-bottom: 8px;
	}
</style>
